<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        /* 提示 */
        .Tips {
            position: fixed;
            top: calc(50%);
            left: calc(50%);
            transform: translate(-50%, -50%);
            padding: 10px;
            border-radius: 15px;
            background-color: rgba(0, 0, 0, 0.8);
            color: white;
            display: none;
            text-align: center;
            z-index: 10000000000000;
        }

        body {
            width: 100%;
            height: 100vh;
            background: url(./inp2.jpg) no-repeat;
            background-size: cover;
        }

        .box {
            width: 100%;
            height: 100vh;
            text-align: center;
            background-color: rgba(49, 49, 49, 0.7);
            padding-top: 60px;
        }

        .img {
            width: 180px;
            height: 180px;
            border-radius: 100%;
            border: 2px solid gray;
        }
        .User_lis{
            padding-left: 40px;
        }
        .User_name {
            font-size: 45px;
            font-weight: 500;
            color: white;
            margin-right: 10px;
        }

        .introduce {
            color: rgb(168, 168, 168);
            font-size: 20px;
        }

        .hr {
            margin: 30px auto;
            width: 350px;
            height: 2px;
            background-color: rgba(131, 131, 131, 0.6);
        }

        .introducess {
            width: 300px;
            display: block;
            margin: auto;
            text-align: center;
            color: rgb(206, 206, 206);
            font-size: 30px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .btn_all {
            margin: 150px;
        }

        .btn {
            color: #ffffff78;
            margin-left: 10px;
            border-radius: 100px;
            display: inline-block;
            vertical-align: middle;
            height: 38px;
            line-height: 38px;
            border: 1px solid rgba(255, 255, 255, 0.6);
            padding: 0 18px;
            background-color: #00000000;
            white-space: nowrap;
            text-align: center;
            font-size: 14px;
            cursor: pointer;
            transition: all .3s;
            box-sizing: border-box;
        }

        .btn:hover {
            color: white;
            border-color: white;
        }

        .lis {
            display: flex;
            justify-content: space-between;
            padding: 10px;
            align-items: center;
            font-size: 22px;
            font-weight: bold;
            border-bottom: 2px solid rgba(128, 128, 128, 0.4);
        }

        .lis span {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .lis:last-child span:last-child {
            text-align: right;
            width: 150px;
            color: rgb(75, 75, 75);
            font-size: 14px;
        }

        .imgs {
            width: 50px;
            height: 50px;
            border-radius: 5px;
        }
    </style>
    <!-- 引⼊ layui.css -->
    <link href="//unpkg.com/layui@2.9.3/dist/css/layui.css" rel="stylesheet">
</head>

<body>
    <ul class="box">

    </ul>
    <!-- 引⼊ layui.js -->
    <script src="//unpkg.com/layui@2.9.3/dist/layui.js"></script>
    <!-- CDN引⼊JQuery -->
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script>
        window.onload = () => {
            Frame()
        }
        // 添加提示符
        function Hint(add) {
            $('body').append(`<div class='Tips'></div>`)
            $('.Tips').fadeTo(500, 1)
            $('.Tips').text(add)
            setTimeout(() => {
                $('.Tips').fadeTo(1000, 0)
            }, 2000)
            setTimeout(() => {
                $('.Tips').detach()
            }, 3000)
        }
        // 渲染框架
        function Frame() {
            let User = JSON.parse(localStorage.getItem('User'))
            $('.box').html(`
                <li>
                    <img class="img" src="${User.img}" alt="" width="50px" height="50px">
                </li>
                <li class='User_lis'><span class="User_name">${User.name}</span><i class="${User.sex == '男' ? 'layui-icon layui-icon-male' : User.sex == '女' ? 'layui-icon layui-icon-female' : 'layui-icon layui-icon-question'}" style="font-size: 30px; color: ${User.sex=='男'?'#1e9fff':User.sex=='女'?'#FFC0CB':'white'};"></i></li>
                <li><span class="introduce">Welcome to my website</span></li>
                <li class="hr"></li>
                <li><span class="introducess">${User.introduce == '' ? '手握日月摘星辰，世间无我这般人' : User.introduce}</span></li>
                <li class="btn_all">
                    <button type="button" class="btn btn_img" title='修改头像'><i class="layui-icon layui-icon-picture" style="font-size: 30px;"></i></button>
                    <button type="button" class="btn btn_psd" title='修改密码'><i class="layui-icon layui-icon-password" style="font-size: 30px;"></i></button>
                    <button type="button" class="btn btn_image" title='个人信息'><i class="layui-icon layui-icon-form" style="font-size: 30px;"></i></button>
                    <button type="button" class="btn btn_out" title='退出登录'><i class="layui-icon layui-icon-logout" style="font-size: 30px;"></i></button>
                    <button type="button" class="btn btn_return" title='返回主页'><i class="layui-icon layui-icon-home" style="font-size: 30px;"></i></button>
                </li>
            `)
            $('.btn_img').on('click', btn_img)
            $('.btn_psd').on('click', btn_psd)
            $('.btn_image').on('click', btn_image)
            $('.btn_out').on('click', btn_out)
            $('.btn_return').on('click', btn_return)
        }
        // 修改头像
        function btn_img() {
            // 在此处输入 layer 的任意代码
            layer.open({
                type: 1, // page 层类型
                area: ['500px', '300px'],
                title: '修改头像',
                shade: 0.6, // 遮罩透明度
                shadeClose: true, // 点击遮罩区域，关闭弹层
                maxmin: false, // 允许全屏最小化
                anim: 0, // 0-6 的动画形式，-1 不开启
                content: `
                <div style="padding: 32px;text-align:center;">
                    <div class="layui-input-wrap">
                      <div class="layui-input-prefix">
                        <i class="layui-icon layui-icon-picture"></i>
                      </div>
                      <input type="url" placeholder="请输入url格式的图片地址" class="layui-input inp_name">
                    </div><br>
                    <button type="button" class="layui-btn btn_Modify" title='发布'>
                        <i class="layui-icon layui-icon-release" style="font-size: 30px;"></i>
                    </button>
                </div>`
            })
            $('.btn_Modify').click(function () {
                if (/^(https?:\/\/)?(?<domain>[\da-z.-]+)\.(?<tld>[a-z.]{2,6})(?<path>[\/\w.-]*)(?<query>\?[^#]*)?(?<hash>#.*)?$/.test($('.inp_name').val())) {
                    let User = JSON.parse(localStorage.getItem('User'))
                    let obj = {
                        name: User.name,
                        password: User.password,
                        img: $('.inp_name').val(),
                        is: User.is,
                        falg: User.falg,
                        introduce: User.introduce,
                        sex: User.sex,
                        age: User.age,
                        date: User.date,
                    }
                    localStorage.setItem('User', JSON.stringify(obj))
                    Frame()
                    layer.closeAll('page', Hint('修改头像成功'))
                } else {
                    Hint('修改失败')
                }
            })
        }
        // 返回主页
        function btn_return() {
            location.assign('./商品管理系统.html')
        }
        // 退出登录
        function btn_out() {
            location.assign('./商品管理登录页面.html')
        }
        // 修改密码
        function btn_psd() {
            let User = JSON.parse(localStorage.getItem('User'))
            // 在此处输入 layer 的任意代码
            layer.open({
                type: 1, // page 层类型
                area: ['500px', '300px'],
                title: '修改密码',
                shade: 0.6, // 遮罩透明度
                shadeClose: true, // 点击遮罩区域，关闭弹层
                maxmin: false, // 允许全屏最小化
                anim: 0, // 0-6 的动画形式，-1 不开启
                content: `
                <div style="padding: 32px;text-align:center;">
                    <div class="layui-input-wrap">
                      <div class="layui-input-prefix">
                        <i class="layui-icon layui-icon-username"></i>
                      </div>
                      <input type="text" placeholder="请输入账户" class="layui-input inp_pad" value='${User.name}'>
                    </div>
                    <div class="layui-input-wrap">
                      <div class="layui-input-prefix">
                        <i class="layui-icon layui-icon-key"></i>
                      </div>
                      <input type="password" placeholder="请输入修改的密码" class="layui-input inp_pad1">
                    </div>
                    <div class="layui-input-wrap">
                      <div class="layui-input-prefix">
                        <i class="layui-icon layui-icon-key"></i>
                      </div>
                      <input type="password" placeholder="请二次输入密码" class="layui-input inp_pad2">
                    </div><br>
                    <button type="button" class="layui-btn btn_pasd"  title='发布'>
                        <i class="layui-icon layui-icon-release" style="font-size: 30px;"></i>
                    </button>
                </div>`
            })
            $('.btn_pasd').click(function () {
                if ($('.inp_pad1').val() === $('.inp_pad2').val()) {
                    let User = JSON.parse(localStorage.getItem('User'))
                    let obj = {
                        name: $('.inp_pad').val(),
                        password: $('.inp_pad1').val(),
                        img: User.img,
                        is: false,
                        falg: User.falg,
                        sex: User.sex,
                        age: User.age,
                        date: User.date,
                        ctiy: User.ctiy,
                        introduce: User.introduce,
                    }
                    localStorage.setItem('User', JSON.stringify(obj))
                    Frame()
                    layer.closeAll('page')
                    let num = 4
                    setInterval(() => {
                        num--
                        Hint(`修改密码成功 [ ${num} ] 后退出登录！`)
                    }, 1000)
                    setTimeout(() => {
                        location.assign('./商品管理登录页面.html')
                    }, 3000)
                } else {
                    Hint('二次密码不正确')
                }
            })
        }
        // 个人信息
        function btn_image() {
            let User = JSON.parse(localStorage.getItem('User'))
            // 在此处输入 layer 的任意代码
            layer.open({
                type: 1, // page 层类型
                area: ['500px', ''],
                title: '个人信息',
                shade: 0.6, // 遮罩透明度
                shadeClose: true, // 点击遮罩区域，关闭弹层
                maxmin: false, // 允许全屏最小化
                anim: 0, // 0-6 的动画形式，-1 不开启
                content: `
                <div style="padding: 32px;text-align:center;">
                    <ul style='margin:0 0 30px 0;'>
                        <li class="lis">
                            <span>头像</span>
                            <img class="imgs"
                                src="${User.img}"
                                alt="">
                        </li>
                        <li class="lis">
                            <span>名字</span>
                            <span>${User.name}</span>
                        </li>
                        <li class="lis">
                            <span>性别</span>
                            <span>${User.sex == '' ? '请填写' : User.sex}</span>
                        </li>
                        <li class="lis">
                            <span>年龄</span>
                            <span>${User.age == '' ? '请填写' : User.age}</span>
                        </li>
                        <li class="lis">
                            <span>生日</span>
                            <span>${User.date == '' ? '请填写' : User.date}</span>
                        </li>
                        <li class="lis">
                            <span>地区</span>
                            <span>${User.ctiy == '' ? '请填写' : User.ctiy}</span>
                        </li>
                        <li class="lis">
                            <span>签名</span>
                            <span>${User.introduce == '' ? '简单介绍一下吧' : User.introduce}</span>
                        </li>
                    </ul>
                    <button type="button" class="layui-btn btn_user">
                        修改个人信息
                    </button>
                </div>`
            })
            $('.btn_user').click(function () {
                let User = JSON.parse(localStorage.getItem('User'))
                // 在此处输入 layer 的任意代码
                layer.open({
                    type: 1, // page 层类型
                    area: ['500px', ''],
                    title: '修改个人信息',
                    shade: 0.6, // 遮罩透明度
                    shadeClose: true, // 点击遮罩区域，关闭弹层
                    maxmin: false, // 允许全屏最小化
                    anim: 0, // 0-6 的动画形式，-1 不开启
                    content: `
                        <div class='div_User' style="padding: 32px;text-align:center;">
                            <div class="layui-input-wrap">
                                <div class="layui-input-prefix">
                                    <i class="layui-icon layui-icon-username"></i>
                                </div>
                                <input type="text" placeholder="请输入账户" class="layui-input" value='${User.name}' readonly>
                            </div>
                            <div class="layui-input-wrap">
                                <div class="layui-input-prefix">
                                    <i class="layui-icon layui-icon-group"></i>
                                </div>
                                <input type="text" placeholder="请输入性别" class="layui-input" value='${User.sex}' maxlength='1'>
                            </div>
                            <div class="layui-input-wrap">
                                <div class="layui-input-prefix">
                                    <i class="layui-icon layui-icon-chat"></i>
                                </div>
                                <input type="number" placeholder="请输入年龄" class="layui-input" value='${User.age}' maxlength='10'>
                            </div>
                            <div class="layui-input-wrap">
                                <div class="layui-input-prefix">
                                    <i class="layui-icon layui-icon-date"></i>
                                </div>
                                <input type="data" placeholder="请输入生日" class="layui-input" value='${User.date}' maxlength='6'>
                            </div>
                            <div class="layui-input-wrap">
                                <div class="layui-input-prefix">
                                    <i class="layui-icon layui-icon-location"></i>
                                </div>
                                <input type="text" placeholder="请输入所在城市" class="layui-input" value='${User.ctiy}' maxlength='5'>
                            </div>
                            <div class="layui-input-wrap">
                                <div class="layui-input-prefix">
                                    <i class="layui-icon layui-icon-chart" style='z-index: 1;'></i>
                                </div>
                                <textarea placeholder="请输入个性介绍" class="layui-textarea layui-input" value='${User.introduce}' maxlength='30'></textarea>
                            </div>
                            <br>
                            <button type="button" class="layui-btn"  title='发布'>
                                <i class="layui-icon layui-icon-release" style="font-size: 30px;"></i>
                            </button>
                        </div>
                    `
                })
                $('.div_User button').click(function () {
                    let User = JSON.parse(localStorage.getItem('User'))
                    let obj = {
                        name: User.name,
                        password: User.password,
                        img: User.img,
                        is: false,
                        falg: User.falg,
                        sex: $('.div_User input').eq(1).val(),
                        age: $('.div_User input').eq(2).val(),
                        date: $('.div_User input').eq(3).val(),
                        ctiy: $('.div_User input').eq(4).val(),
                        introduce: $('.div_User textarea').val(),
                    }
                    localStorage.setItem('User', JSON.stringify(obj))
                    Frame()
                    layer.closeAll('page', Hint('修改成功'))

                })
            })
        }
    </script>
</body>

</html>